<template>
   <div class="footer">
        <div  v-for="(item, index) in imgList" :key="index" class="list" @click="onClick(item)">
            <img :src="item.imgChoose" alt="" class="icon" v-if="item.path == route.path">
            <img :src="item.img" alt="" class="icon" v-else>
            <div class="title" :class="{'choose': item.path == route.path}">{{item.title}}</div>
        </div>
   </div>
</template>
<script setup>
import home from "@/assets/images/home.png";
import homeC from "@/assets/images/home_c.png";
import wallet from "@/assets/images/wallet.png";
import walletC from "@/assets/images/wallet_c.png";
import order from "@/assets/images/order.png";
import orderC from "@/assets/images/order_c.png";
import personal from "@/assets/images/personal.png";
import personalC from "@/assets/images/personal_c.png";
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router"
const { t } = useI18n()
const imgList = [
    { imgChoose: homeC, img: home, choose: "", path: "/home", title: t('foot.home'), },
    { imgChoose: walletC, img: wallet, choose: "", path: "/wallet", title: t('foot.wallet') },
    { imgChoose: orderC, img: order, choose: "", path: "/order", title: t('foot.order') },
    { imgChoose: personalC, img: personal, choose: "", path: "/personal", title: t('foot.personal') },
]
const router = useRouter()
const route = useRoute()
console.log(route.path)
function onClick (item) {
    console.log(item.path)
    router.replace(item.path)
}
</script>
<style lang="less">
    .footer {
        box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.16);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .list {
            text-align: center;
        }
        .icon {
            padding-top: 4px;
            height: 23px;
        }
        .title {
            line-height: 1;
            padding-bottom: 2px;
            font-size: 8px;
        }
        .choose {
            color: var(--primary)
        }
    }
</style>